import React from 'react';
import { Card, Typography, Row, Col, Space, Divider } from 'antd';
import { BgColorsOutlined } from '@ant-design/icons';
import ThemeToggle from '../../../components/common/ThemeToggle';
import { Layout } from 'antd';

const { Title, Paragraph } = Typography;
const { Content } = Layout;

/**
 * 系统设置页面 - 简化版
 * 只保留主题切换功能
 */
const Settings: React.FC = () => {
  return (
    <Content style={{ padding: '24px' }}>
      <Typography.Title level={2}>系统设置</Typography.Title>
      
      <Row gutter={[24, 24]}>
        <Col xs={24} md={16}>
          <Card 
            title={<Space><BgColorsOutlined /> 主题设置</Space>}
            bordered={true}
                    >
            <Row align="middle" gutter={[16, 16]}>
              <Col span={6}>
                <Title level={5}>主题模式：</Title>
              </Col>
              <Col span={18}>
                <Space align="center" size="large">
                  <ThemeToggle size="large" showTooltip={true} />
                  <Paragraph style={{ marginBottom: 0 }}>
                    切换系统的亮色/暗色模式
                  </Paragraph>
                </Space>
                <Divider dashed />
                <Paragraph type="secondary">
                  暗色模式可以降低屏幕亮度，减少眼睛疲劳，特别适合夜间使用。
                  主题设置会自动保存，下次登录时将保持您的选择。
                </Paragraph>
              </Col>
            </Row>
          </Card>
        </Col>
        
        <Col xs={24} md={8}>
          <Card 
            title="主题效果预览"
            bordered={true}
                    >
            <div 
                    style={{ 
                padding: '24px',
                textAlign: 'center',
                borderRadius: '8px',
                backgroundColor: 'var(--background-color)',
                color: 'var(--text-color)',
                transition: 'all 0.3s'
                    }}
                  >
              <Title level={4}>当前主题效果</Title>
              <Paragraph>
                这里展示了当前选择的主题效果。
                您可以通过左侧的主题切换开关随时更改。
              </Paragraph>
              <ThemeToggle size="large" showTooltip={false} />
            </div>
          </Card>
        </Col>
      </Row>
    </Content>
  );
};

export default Settings;